<template>
  <div class="rightBox-conter">
    <!-- 如果是一二维 则头部改为演进分区 -->
    <span v-if="modelobj.typeCode == 'W040001' || modelobj.typeCode == 'W040002'"
      >演进分区<i class="blue">{{ props.sectionName ? '-' + props.sectionName : '' }}</i></span
    >
    <!-- 如果是联合调度 则头部是水库群名称 -->
    <span v-else-if="modelobj.typeCode == 'W090003'"
      >水库群<i class="blue">{{ props.sectionName ? '-' + props.sectionName : '' }}</i></span
    >
    <!-- 时空变源 -->
    <span v-else-if="modelobj.typeCode == 'W010001'"
      >计算单元<i class="blue">{{ props.sectionName ? '-' + props.sectionName : '' }}</i></span
    >
    <span v-else-if="!(modelobj.typeCode == 'W080001')"
      >预报断面<i class="blue">{{ props.sectionName ? '-' + props.sectionName : '' }}</i></span
    >
    <span v-else
      >预报区域-<i class="blue">{{ props.zoneId == 1 ? '大汶河' : '沂怵河' }}</i></span
    >
    <!-- <img src="../../../assets/images/modelExam/close.png" alt="" /> -->
  </div>
  <!-- ai降雨 -->
  <Rainfall
    v-if="modelobj.typeCode == 'W080001'"
    :modelobj="props.modelobj"
    :zoneId="props.zoneId"
  />
  <!-- 时空变源模型配置 -->
  <Forecast
    v-if="modelobj.typeCode == 'W010001'"
    :modelobj="props.modelobj"
    :sectionObj="props.sectionObj"
  />
  <!-- 新安江模型配置 -->
  <XInanRiver v-else-if="modelobj.typeCode == 'W010002'" :modelobj="props.modelobj" />
  <!-- AI洪水预报配置 -->
  <floodForecast
    v-else-if="modelobj.typeCode == 'W010004'"
    :modelobj="props.modelobj"
    :sectionObj="props.sectionObj"
    :zoneId="props.zoneId"
  />
  <!-- AI防洪调度配置 -->
  <floodControlOperation
    v-else-if="modelobj.typeCode == 'W090004'"
    :modelobj="props.modelobj"
    :sectionObj="props.sectionObj"
    :zoneId="props.zoneId"
  />
  <!-- 联合调度模型配置 -->
  <Joint
    v-else-if="modelobj.typeCode == 'W090003'"
    :zoneId="zoneId"
    :sectionObj="props.sectionObj"
  />
  <!-- 规程调度模型配置 -->
  <Disciplin
    v-else-if="modelobj.typeCode == 'W090001'"
    :modelobj="props.modelobj"
    :sectionObj="props.sectionObj"
  />
  <!-- 优化调度模型配置 -->
  <Optimize
    v-else-if="modelobj.typeCode == 'W090002'"
    :modelobj="props.modelobj"
    :sectionObj="props.sectionObj"
  />
  <!-- 一维水动力模型配置 -->
  <One
    v-else-if="modelobj.typeCode == 'W040001'"
    :modelobj="props.modelobj"
    :sectionObj="props.sectionObj"
    :zoneId="props.zoneId"
  />
  <!-- 二维水动力模型配置 -->
  <Two
    v-else-if="modelobj.typeCode == 'W040002'"
    :modelobj="props.modelobj"
    :sectionObj="props.sectionObj"
    :zoneId="zoneId"
    :over-hide="props.overHide"
  />
  <!-- API模型 -->
  <ApiModel
    v-else-if="modelobj.typeCode == 'W010003'"
    :modelobj="props.modelobj"
    :sectionObj="props.sectionObj"
  />
  <!-- 溃坝模型 -->
  <KbModel
    v-else-if="modelobj.typeCode == 'W090006'"
    :modelobj="props.modelobj"
    :sectionObj="props.sectionObj"
    :zoneId="props.zoneId"
  />
</template>

<script setup>
import { ref, onMounted, watch } from 'vue'
import Forecast from './cpns/ForecastCross-section.vue'
import Disciplin from './cpns/DisciplinModel.vue'
import Optimize from './cpns/OptimizeScheduling.vue'
import One from './cpns/OneHydrodynamic.vue'
import Two from './cpns/TwoHydrodynamic.vue'
import Rainfall from './cpns/rainfalls.vue'
import KbModel from './cpns/kb-model.vue'
import XInanRiver from './cpns/XInanRiver.vue'
import floodForecast from './cpns/floodForecast.vue'
import floodControlOperation from './cpns/floodControlOperation.vue'
import Joint from './cpns/jointDispatch.vue'
import ApiModel from './cpns/api-model.vue'

const props = defineProps({
  modelobj: {
    type: Object,
    default: () => {}
  },
  sectionName: {
    type: String,
    default: ''
  },
  // 点击预报断面的水库
  sectionObj: {
    type: Object,
    default: () => {}
  },
  // 流域id
  zoneId: {
    type: Number,
    default: 1
  },
  // 是否展示河道断面
  overHide: {
    type: Boolean,
    default: false
  }
})

onMounted(() => {
  console.log(props.modelobj, '水动力')
})
</script>

<style lang="less" scoped>
.blue {
  color: #0154db;
  font-size: var(--header-fontsize);
  font-weight: bold;
}
.rightBox-conter {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 20px 0px 0 0px;
  padding-bottom: 10px;
  // padding-left: 20px;
  border-bottom: 1px solid var(--fold-border-color);
  font-size: var(--header-fontsize);

  img {
    width: 20px;
    height: 20px;
  }
}
</style>
